<template>
	<view class="banner">
		<Barrage :duration="2000" :wait="1000" :top="150" :left="10" :radius="60" :loop="true"
			v-for="(item, index) in barrageList" :key="index" :info="item" :index="index"></Barrage>
		<swiper class="poster_swiper" circular :current="swiperIndex" @change="onSwiperChange">
			<swiper-item v-for="(item, index) of detailData.manyGoods" :key="index">
				<view class="goods_info_box" :class="{ active: swiperIndex == index }"
					@click="$emit('changePopType',{fromType:'banner',type:'detail',value:{sku_id:item.sku_id,goods_content:item.goods_content},openPop:true})">
					<image class="goods_image" :src="$util.img(item.goods_image+'?x-oss-process=image/resize,w_600,m_lfit')" mode="aspectFit"></image>
					<view class="des">点击查看商品详情</view>
					<image class="type" :src="isType(item.level_id)" mode="widthFix"></image>
					<view class="name">{{item.goods_name}}</view>
					<view class="price">
						<view class="price-content">
							<text>¥</text>
							<text>{{item.sku_price}}</text>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import Barrage from './Barrage.vue';
	export default {
		props: {
			detailData: {
				type: Object,
				default: {
					manyGoods: []
				}
			},
			barrageData: {
				type: Array,
				default: []
			}
		},
		components: {
			Barrage
		},
		data() {
			return {
				bannerList: [],
				swiperIndex: 0,
				barrageList: [],
				barrageTimer: null,
				// barrageData: []
			}
		},
		watch: {
			barrageData: {
				handler: function(newValue, oldValue) {
					if (oldValue.length == 0 && newValue.length > 0) {
						this.barrageList = this.barrageData.slice(0, 2);
						const that = this;
						this.barrageTimer && clearInterval(this.barrageTimer)
						this.barrageTimer = setInterval((function target() {
							that.add();
							return target;
						})(), 2100)
					}
				},
			}
		},
		methods: {
			previewImage(index) {
				let paths = [];
				for (let i = 0; i < this.detailData.manyGoods.length; i++) {
					paths.push(this.$util.img(this.detailData.manyGoods[i].goods_image, {
						size: 'big'
					}));
				}
				uni.previewImage({
					current: index,
					urls: paths,
				});
			},
			// 轮播图变化
			onSwiperChange(e) {
				this.swiperIndex = e.detail.current;
			},
			add() {
				let randomItem = this.barrageData[Math.floor(Math.random() * this.barrageData.length)];
				this.barrageList = this.barrageList.concat(randomItem);
			},
			// 判断商品属于哪一款
			isType(type = 2) {
				switch (type) {
					case 1:
						return require(`@/static/image/max.png`);
					case 3:
						return require(`@/static/image/hide.png`);
					case 2:
						return require(`@/static/image/special.png`);
					case 4:
						return require(`@/static/image/pt.png`);
					default:
						break;
				}

			},
		},
		beforeDestroy() {
			clearInterval(this.barrageTimer);
			this.barrageTimer = null;
		}
	}
</script>

<style lang="scss" scoped>
	.banner {
		position: relative;

		.poster_swiper {
			height: 860rpx;
			width: 100%;

			swiper-item {
				box-sizing: border-box;
				display: flex;
				align-items: center;

				.goods_info_box {
					width: 100%;
					height: 100%;
					// transform: scale(0.88);
					transition: all 0.4s;
					position: relative;
					overflow: hidden;
					// background-color: #606266;

					// &.active {
					// 	transform: scale(1);
					// }

					.goods_image {
						width: 600rpx;
						display: block;
						margin: 38rpx auto 0;
						// height: calc(100vw - 220rpx);
					}
				}

				.des {
					color: #878787;
					font-size: 24rpx;
					text-align: center;
					// margin-top: 29rpx;
				}

				.type {
					width: 461rpx;
					height: 43rpx;
					display: block;
					margin: 15rpx auto 0;
				}

				.name {
					font-size: 28rpx;
					color: #111111;
					text-align: center;
					margin: 30rpx auto 26rpx;
					width: 80%;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					font-weight: bold;
				}

				.price {
					display: flex;
					justify-content: center;
					font-weight: bold;
					color: #111;

					.price-content {
						flex: 1;
						line-height: 0;
						text-align: center;

						&>text:nth-of-type(1) {
							font-size: 28rpx;
							padding-right: 5px;
						}

						&>text:nth-of-type(2) {
							font-size: 39rpx;
						}
					}

				}
			}
		}

	}
</style>
